<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 解构赋值
    // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。


    // 对象解构  => 对应键名解构,键值赋值给对应的变量
    // var zhang = {
    //     name:"张三",
    //     age:18,
    //     sex:"男",
    //     height:"177cm",
    //     weight:"70kg",
    // }
    var zhang = { name: "张三", age: 18, sex: "男", height: "177cm", weight: "70kg" };

    // 完全解构
    // 1. 对应键名解构
    // var { name: name, age, sex, height, weight } = { name: "张三", age: 18, sex: "男", height: "177cm", weight: "70kg" }

    // var { height, weight, name, age, sex } = { name: "张三", age: 18, sex: "男", height: "177cm", weight: "70kg" }
    // console.log(name, age, sex, height, weight);

    // 2. 解构过程中,自定义变量名 
    // var { name: name, age: age, sex: sex, height: height, weight: weight } = { name: "张三", age: 18, sex: "男", height: "177cm", weight: "70kg" }
    // console.log(name, age, sex, height, weight);

    // var { name: a, age: b, sex: c, height: d, weight: e } = { name: "张三", age: 18, sex: "男", height: "177cm", weight: "70kg" }
    // console.log(a, b, c, d, e);

    // 什么时候自定义变量名?  1. 变量名已经被使用   2. 变量名是关键字/保留字(class delete)
    // var { name, age, class: cls, sex, height, weight } = { name: "张三", age: 18, class: "2207", sex: "男", height: "177cm", weight: "70kg" }
    // console.log(name, age, cls, sex, height, weight)

    // 不完全解构   即等号左边的模式，只匹配一部分的等号右边的数组
    // var { name, age } = { name: "张三", age: 18, sex: "男", height: "177cm", weight: "70kg" }
    // console.log(name, age);

    // 解构失败:  解构不成功，变量的值就等于undefined
    // var { name, age, isStudy } = { name: "张三", age: 18, sex: "男", height: "177cm", weight: "70kg" }
    // console.log(name, age , isStudy );

    // 在解构过程中,可以给变量设置默认值 
    // var { name, age, isStudy = true } = { name: "张三", age: 18, sex: "男", height: "177cm", weight: "70kg" }
    //等价于 isStudy = isStudy === undefined ? true : isStudy
    // console.log(name, age , isStudy );




    // 对象解构需要注意:  不要对 null 和 undefined使用对象解构

    // var {a,toString,toFixed} = 1;
    // console.log(toString,toFixed);

    // var {a} = null;
    // var {a} = undefined;


    // 对象解构配合扩展运算符  => 实现Rest效果(合并剩余参数) 
    // 注意: Rest element must be last element
    // var { name, age, ...info } = { name: "张三", age: 18, sex: "男", height: "177cm", weight: "70kg" }
    // console.log(name, age, info);

    // 对象解构 => 对应键名解构,取值不分先后 => 先取需要的,再合并剩余的
    // var { name, sex, ...info } = { name: "张三", age: 18, sex: "男", height: "177cm", weight: "70kg" }
    // console.log(name, sex, info);




    // 对复杂的对象结构 进行解构  => 对 对象的属性值二次解构 对应键名解构键值

    var zhang = {
        name: "张三",
        info: {
            age: 18,
            sex: "男",
            height: "177cm",
            weight: "70kg"
        },
        hobby: ["sing", "dance", "basketball"],
    };

    var { name, info, hobby } = zhang;
    console.log(name, info, hobby);

    var { age, sex, height, weight } = info;
    console.log(age, sex, height, weight);

    var [a, b, c] = hobby;
    console.log(a, b, c);

    var { name, info: { age, sex, height, weight }, hobby: [a, b, c] } = zhang;
    console.log(name, age, sex, height, weight, a, b, c);








</script>

</html>